<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="include/common-header :: common_header(~{::title},~{::link})">
  <title>流程用户组列表</title>
</head>
<body class="gray-bg">

<!--页面内容开始-->
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-lg-6">
      <div class="ibox ">
        <div class="ibox-title">
          <h5>流程用户组列表 </h5>
        </div>
        <div class="ibox-content">
          <div class="table-responsive">
            <table id="teacherpgroupList_table" class="table table-striped"></table>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6 teacherpgroupList_user_table_area">
      <div class="ibox ">
        <div class="ibox-title">
          <h5>组人员列表 </h5>
        </div>
        <div class="ibox-content">
          <div class="table-responsive">
            <table id="teacherpgroupList_user_table" class="table table-striped"></table>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6 teacherpgroupList_user_dept_table_area" style="display: none">
      <div class="ibox ">
        <div class="ibox-title">
          <h5>组人员部门列表 </h5>
        </div>
        <div class="ibox-content">
          <div class="table-responsive">
            <table id="teacherpgroupList_user_dept_table" class="table table-striped"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--页面内容结束-->
<div th:replace="include/common-js :: common_js"></div>
<div th:replace="web/zzsys/tteacherinfo-sel::tteacherinfoSel"></div>
<script type="text/javascript">
  $().ready(function () {
    teacherpgroupListObj.initTable();
    teacherpgroupListObj.initUserTable();
    teacherpgroupListObj.initUserDeptTable();
  })
  var teacherpgroupListObj = new Object({
    myTable: undefined,
    myUserTable: undefined,
    myUserDeptTable: undefined,
    addOrUpdateHandle: function (id) {
      teacherpgroupAddOrUpdateObj.init(id);
      $('#teacherpgroupAddOrUpdate_Modal').modal('show')
    },
    refreshDataList: function () {
      teacherpgroupListObj.myTable.bootstrapTable('refresh');
    },
    refreshUserDataList: function (processGroupCode) {
      teacherpgroupListObj.myUserTable.bootstrapTable('refresh', {
        url: `/zzsys/teacherpgroup/userList/${processGroupCode}`
      });
      $('.teacherpgroupList_user_dept_table_area').hide();
      $('.teacherpgroupList_user_table_area').show();
    },
    refreshUserDeptDataList: function (processGroupCode) {
      teacherpgroupListObj.myUserDeptTable.bootstrapTable('refresh', {
        url: `/zzsys/teacherpgroup/userDeptList/${processGroupCode}`
      });
      $('.teacherpgroupList_user_dept_table_area').show();
      $('.teacherpgroupList_user_table_area').hide();
    },
    initTable: function () {
      teacherpgroupListObj.myTable = $('#teacherpgroupList_table').bootstrapTable({
        url: '/zzsys/teacherpgroup/list',
        method: 'post',
        formatNoMatches: function () {  //没有匹配的结果
          return '暂无数据';
        },
        queryParams: function (param) {
          return param;
        },
        columns: [{
          title: '#',
          align: 'center',
          width: 50,
          checkbox: true,
          formatter: function (value, row, index) {
            return index + 1;
          }
        }, {
          title: '流程用户组',
          field: 'groupName',
          width: 100
        }, {
          title: '用户数量',
          field: 'userNum',
          width: 80
        }, {
          title: '说明',
          field: 'instructions'
        }, {
          title: '操作',
          align: 'center',
          width: 100,
          events: {
            'click .add': function (e, value, row, index) {
              tteacherinfoSelObj.open(function (users) {
                $.mySwalConfirm(`将设置${users.map(o=>{return o.teacherName}).join(',')}为${row.groupName}，确认吗？`, function () {
                  $.myPost({
                    url: `/zzsys/teacherpgroup/saveForProcessGroupNew`,
                    dataType: "json",
                    data: {
                      processGroupCode: row.groupCode,
                      teacherIds: users.map(o=>{return o.teacherId})
                    },
                    success: function (data) {
                      if (data && data.code === 0) {
                        toastr.success(data.msg, '操作提示')
                        teacherpgroupListObj.refreshUserDataList(`${row.groupCode}`);
                      } else {
                        toastr.error(data.msg, '操作失败')
                      }
                    }
                  })
                });
              });
            }
          },
          formatter: function (value, row, index) {
            var opers = [];
            if(!row.mustDept){
              opers.push(`<a class="add btn btn-white btn-bitbucket text-success" title="新增">
                                    <i class="fa fa-plus"></i>
                                </a>`)
            }
            return opers.join('');
          }
        }],
        onClickRow: function (row, $element, field) {
          if (row.mustDept) {
            teacherpgroupListObj.refreshUserDeptDataList(row.groupCode);
          } else {
            teacherpgroupListObj.refreshUserDataList(row.groupCode);
          }
        },
        responseHandler: function (res) {
          return res.list;
        },
        onLoadSuccess: function (data) {
          $('[data-toggle="tooltip"]').tooltip()
        }
      });
    },
    initUserTable: function () {
      teacherpgroupListObj.myUserTable = $('#teacherpgroupList_user_table').bootstrapTable({
        // url: '/zzsys/teacherpgroup/userList',
        formatNoMatches: function () {  //没有匹配的结果
          return '暂无数据';
        },
        queryParams: function (param) {
          return param;
        },
        columns: [{
          title: '#',
          align: 'center',
          width: 50,
          checkbox: true,
          formatter: function (value, row, index) {
            return index + 1;
          }
        }, {
          title: '教师姓名',
          field: 'teacherName',
          width: 150
        }, {
          title: '操作',
          align: 'center',
          width: 100,
          events: {
            'click .trash': function (e, value, row, index) {
              $.mySwalConfirm(`将删除${row.teacherName}，确认吗？`, function () {
                $.myDelete({
                  url: `/zzsys/teacherpgroup/deleteById`,
                  dataType: "json",
                  data: [row.id],
                  success: function (data) {
                    if (data && data.code === 0) {
                      toastr.success(data.msg, '操作提示')
                      teacherpgroupListObj.refreshDataList();
                      teacherpgroupListObj.refreshUserDataList(`${row.groupCode}`);
                    } else {
                      toastr.error(data.msg, '操作失败')
                    }
                  }
                })
              });
            }
          },
          formatter: function (value, row, index) {
            var opers = [];
            opers.push(`<a class="trash btn btn-white btn-bitbucket text-info" title="删除">
                                    <i class="fa fa-trash"></i>
                                </a>`)
            return opers.join('');
          }
        }],
        responseHandler: function (res) {
          return res.list;
        },
        onLoadSuccess: function (data) {
          $('[data-toggle="tooltip"]').tooltip()
        }
      });
    },
    initUserDeptTable: function () {
      teacherpgroupListObj.myUserDeptTable = $('#teacherpgroupList_user_dept_table').bootstrapTable({
        // url: '/zzsys/teacherpgroup/userList',
        formatNoMatches: function () {  //没有匹配的结果
          return '暂无数据';
        },
        queryParams: function (param) {
          return param;
        },
        columns: [{
          title: '#',
          align: 'center',
          width: 50,
          checkbox: true,
          formatter: function (value, row, index) {
            return index + 1;
          }
        }, {
          title: '部门名称',
          field: 'deptName',
          width: 150
        }, {
          title: '教师姓名',
          field: 'teacherName',
          width: 150,
          formatter(value, row, index){
            return row.items.map(o=>{
              return o.teacherName;
            }).join(',')
          }
        }, {
          title: '操作',
          align: 'center',
          events: {
            'click .add': function (e, value, row, index) {
              tteacherinfoSelObj.open(function (users) {
                $.mySwalConfirm(`将新增${users.map(o=>{return o.teacherName}).join(',')}为${row.deptName}的${row.groupName}，确认吗？`, function () {
                  $.myPost({
                    url: `/zzsys/teacherpgroup/saveForDeptNew`,
                    dataType: "json",
                    data: {
                      processGroupCode: row.groupCode,
                      deptId: row.deptId,
                      teacherIds: users.map(o=>{return o.teacherId})
                    },
                    success: function (data) {
                      if (data && data.code === 0) {
                        toastr.success(data.msg, '操作提示')
                        teacherpgroupListObj.refreshDataList();
                        teacherpgroupListObj.refreshUserDeptDataList(`${row.groupCode}`);
                      } else {
                        toastr.error(data.msg, '操作失败')
                      }
                    }
                  })
                });
              });
            },
            'click .exchange': function (e, value, row, index) {
              tteacherinfoSelObj.open(function (users) {
                $.mySwalConfirm(`将替换${users.map(o=>{return o.teacherName}).join(',')}为${row.deptName}的${row.groupName}，确认吗？`, function () {
                  $.myPost({
                    url: `/zzsys/teacherpgroup/saveForDeptInstead`,
                    dataType: "json",
                    data: {
                      processGroupCode: row.groupCode,
                      deptId: row.deptId,
                      teacherIds: users.map(o=>{return o.teacherId})
                    },
                    success: function (data) {
                      if (data && data.code === 0) {
                        toastr.success(data.msg, '操作提示')
                        teacherpgroupListObj.refreshDataList();
                        teacherpgroupListObj.refreshUserDeptDataList(`${row.groupCode}`);
                      } else {
                        toastr.error(data.msg, '操作失败')
                      }
                    }
                  })
                });
              });
            },
            'click .trash': function (e, value, row, index) {
              $.mySwalConfirm(`将删除${row.deptName}的流程用户，确认吗？`, function () {
                $.myDelete({
                  url: `/zzsys/teacherpgroup/deleteByDept/${row.groupCode}/${row.deptId}`,
                  dataType: "json",
                  success: function (data) {
                    if (data && data.code === 0) {
                      toastr.success(data.msg, '操作提示')
                      teacherpgroupListObj.refreshDataList();
                      teacherpgroupListObj.refreshUserDeptDataList(`${row.groupCode}`);
                    } else {
                      toastr.error(data.msg, '操作失败')
                    }
                  }
                })
              });
            }
          },
          formatter: function (value, row, index) {
            var opers = [];
            opers.push(`<a class="add btn btn-white btn-bitbucket text-success" title="新增">
                                    <i class="fa fa-plus"></i>
                                </a>`)
            opers.push(`<a class="exchange btn btn-white btn-bitbucket text-success" title="替换">
                                    <i class="fa fa-exchange"></i>
                                </a>`)
            opers.push(`<a class="trash btn btn-white btn-bitbucket text-info" title="删除">
                                    <i class="fa fa-trash"></i>
                                </a>`)
            return opers.join('');
          }
        }],
        responseHandler: function (res) {
          return res.list;
        },
        onLoadSuccess: function (data) {
          $('[data-toggle="tooltip"]').tooltip()
        }
      });
    }
  })
</script>
</body>
</html>